<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  lang="zh-CN"
>
<head>
  <title>监管设备管理</title>
</head>
<body>
<div
  layout:fragment="content"
  id="app" v-cloak
>
  <div class="container">
    <div class="myHeader">
      <div class="myHeader-title">
        新增监控设备信息
      </div>
    </div>
    <table
      width="100%"
      border="0"
      class="el-table el-table--border"
      cellspacing="0"
      cellpadding="0"
    >
      <tbody>
      <tr>
        <td>所在机房<span style="color: red">*</span></td>
        <td>
          <el-select
            v-model="form.houseId"
            v-validate="'required'"
            name="houseId"
          >
            <el-option v-for="[key,val] in houseMap" :key="key" :label="val" :value="key"></el-option>
          </el-select>
          <div
            id="houseId_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('houseId:required')">请选择所在机房</span>
          </div>
        </td>
      </tr>
      <tr>
        <td
          width="100"
          nowrap=""
        >监测设备名称<span style="color: red">*</span>
        </td>
        <td>
          <el-input
            v-model="form.deviceName"
            v-validate="'required|max:50'"
            maxlength="50"
            name="spotType"
            show-word-limit
            placeholder="请输入监测设备名称"
          ></el-input>
          <div
            id="spotType_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('spotType:required')">请填写监测设备名称</span>
            <span class="field-error" v-show="errors.has('spotType:max')">监测设备名称长度最大为 50 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td
          width="100"
          nowrap=""
        >设备IP或主机名<span style="color: red">*</span>
        </td>
        <td>
          <el-input
            v-model="form.hostName"
            v-validate="'required|max:50'"
            maxlength="50"
            name="spotIp"
            show-word-limit
            placeholder="请输入设备IP或主机名"
          ></el-input>
          <div
            id="spotIp_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('spotIp:required')">请填写设备IP或主机名</span>
            <span class="field-error" v-show="errors.has('spotIp:max')">设备IP或主机名长度最大为 50 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>控制端口<span style="color: red">*</span></td>
        <td>
          <el-input
            v-model="form.ctrPort"
            v-validate="'required|numeric|max:6'"
            maxlength="6"
            show-word-limit
            name="port"
            title="请输入控制端口"
          ></el-input>
          <div
            id="port_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('port:required')">请填写控制端口</span>
            <span class="field-error" v-show="errors.has('port:numeric')">{{ errors.first('port') }}</span>
            <span class="field-error" v-show="errors.has('port:max')">控制端口长度最大为 6 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>管理用户名<span style="color: red">*</span></td>
        <td>
          <el-input
            v-model="form.adminUser"
            v-validate="'required|max:50'"
            maxlength="50"
            show-word-limit
            name="user"
            placeholder="请输入管理用户名"
          ></el-input>
          <div
            id="user_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('user:required')">请填写管理用户名</span>
            <span class="field-error" v-show="errors.has('user:max')">管理用户名长度最大为 50 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>管理密码<span style="color: red">*</span></td>
        <td>
          <el-input
            v-model="form.adminPassword"
            v-validate="'required|max:50'"
            maxlength="50"
            name="pass"
            show-password
            show-word-limit
            placeholder="请输入管理密码"
          ></el-input>
          <div
            id="pass_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('pass:required')">请填写管理密码</span>
            <span class="field-error" v-show="errors.has('pass:max')">管理密码长度最大为 50 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>瞬时流量</td>
        <td>
          <el-input
            v-model="form.transientInput"
            v-validate="'checkTransientMax|checkTransientFloat'"
            name="inFlow"
          >
            <template slot="prepend">进口</template>
          </el-input>
          <div
            id="inFlow_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('inFlow:checkTransientMax')">瞬时流量 进口 不含小数位，长度最大为 11 位</span>
            <span class="field-error"
                  v-show="errors.has('inFlow:checkTransientFloat')">瞬时流量 进口 必须是整数或小数，小数示例：1.34</span>
          </div>
          <br>
          <el-input
            v-model="form.transientOutput"
            v-validate="'checkTransientMax|checkTransientFloat'"
            name="outFlow"
          >
            <template slot="prepend">出口</template>
          </el-input>
          <div
            id="outFlow_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('outFlow:checkTransientMax')">瞬时流量 出口 不含小数位，长度最大为 11 位</span>
            <span class="field-error"
                  v-show="errors.has('outFlow:checkTransientFloat')">瞬时流量 出口 必须是整数或小数，小数示例：1.34</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>接入方式<span style="color: red">*</span></td>
        <td>
          <el-select
            v-model="form.connectType"
            name="linkType"
            placeholder="请选择监管设备链路接入方式"
          >
            <el-option
              v-for="[k,v] in fieldFormatter.baseMonitorDevice.connectTypeMap"
              :value="k"
              :key="k"
              :label="v"
            ></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td>链路状态<span style="color: red">*</span></td>
        <td>
          <el-select
            v-model="form.linkStatus"
            name="linkState"
            placeholder="请选择监管设备链路状态"
          >
            <el-option
              v-for="[k,v] in fieldFormatter.baseMonitorDevice.linkStatusMap"
              :value="k"
              :key="k"
              :label="v"
            ></el-option>
          </el-select>
        </td>
      </tr>
      </tbody>
    </table>
    <div align="center">
      <el-button
        @click="add"
        type="primary"
      >确认</el-button>
      <el-button
        @click="_forward('basic-data/admin_monitor_device')"
      >返回</el-button>
    </div>
  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/component/BaseValidateVue.js"></script>
  <script src="/static/js/module/basic-data/model/BaseMonitorDevice.js"></script>
  <script src="/static/js/module/basic-data/api/baseMonitorDeviceApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <script src="/static/js/module/basic-data/add/admin_monitor_device_add.js"></script>
</div>
</body>
</html>
